<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改</title>
    <script src="ststic/js/vue.js"></script>
    <script src="ststic/js/jquery.js"></script>
</head>
<body>
<div id="app">
    <input type="text" placeholder="id" v-model="product.id"  readonly>
    <input type="text" placeholder="产品名" v-model="product.name">
    <input type="text" placeholder="价格" v-model="product.price">
    <input type="text" placeholder="品牌" v-model="product.brand">
    <button @click="modify">修改</button>
</div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            product:{}
        },
        methods:{
            modify(){
                $.ajax('/modify',{
                    data:{
                        product:this.product
                    },
                    success: data => {
                        if (data.code == 200) {
                            window.location.href = '/product.html';
                        }
                    }
                })
            }
        },
        created(){
            let url = window.location.href;
            let arr = url.split('?id=');
            let id = arr[1];

            $.ajax('/getProduct', {
                data: {
                    id
                },
                success: data => {
                    if (data.code == 200) {
                        this.product=data.item;
                    }
                }
            })
        }
    })

</script>

</body>
</html>